<template>
  <div class="other-settings views-container">
    <div class="wlm-form" style="position: relative;" v-loading="loading1">
      <div class="wlm-form-header">
        <div style="display:flex;justify-content:space-between;">
          <div>交易漏斗图
             <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;"> 更新时间：{{formdata1.data_update_time}}
                <el-button type="text" @click="updatabtn1">更新数据</el-button>
             </span>
          </div>
          <div style="z-index:999;">
            <el-select
              v-model="value"
              placeholder="请选择"
              @change="changebtn1"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="top-box">
        <div>
          <div style="font-weight:bold;">访客人数（人）</div>
          <div>{{ formdata1.lookGoodsUserNumber }}</div>
          <!-- <i class="el-icon-top"></i> -->
          <div style="font-weight:bold;">
            较前一天
            <span
              v-if="formdata1.lookGoodsUserNumber_rate < 0"
              style="color:red;"
              >{{ formdata1.lookGoodsUserNumber_rate }}%<i
                class="el-icon-bottom"
                style="font-size:14px;"
              ></i
            ></span>
            <span v-else style="color:green"
              >{{ formdata1.lookGoodsUserNumber_rate }}%<i
                class="el-icon-top"
                style="font-size:14px;"
              ></i
            ></span>
          </div>
        </div>
        <div style="margin-left:10px;">
          <div style="font-weight:bold;">商品浏览次量（次）</div>
          <div>{{ formdata1.lookGoodsNumber }}</div>
          <div style="font-weight:bold;">
            较前一天
            <span v-if="formdata1.lookGoodsNumber_rate < 0" style="color:red;"
              >{{ formdata1.lookGoodsNumber_rate }}%<i
                class="el-icon-bottom"
                style="font-size:14px;"
              ></i
            ></span>
            <span v-else style="color:green"
              >{{ formdata1.lookGoodsNumber_rate }}%<i
                class="el-icon-top"
                style="font-size:14px;"
              ></i
            ></span>
          </div>
        </div>
      </div>
      <div class="top-box">
        <div>
          <div style="font-weight:bold;">下单人数（人）</div>
          <div>{{ formdata1.orderUserNumber }}</div>
          <div style="font-weight:bold;">
            较前一天
            <span v-if="formdata1.orderUserNumber_rate < 0" style="color:red;"
              >{{ formdata1.orderUserNumber_rate }}%<i
                class="el-icon-bottom"
                style="font-size:14px;"
              ></i
            ></span>
            <span v-else style="color:green"
              >{{ formdata1.orderUserNumber_rate }}%<i
                class="el-icon-top"
                style="font-size:14px;"
              ></i
            ></span>
          </div>
        </div>
        <div style="margin-left:10px;">
          <div style="font-weight:bold;">商城订单数（笔）</div>
          <div>{{ formdata1.orderCount }}</div>
          <div style="font-weight:bold;">
            较前一天
            <span v-if="formdata1.orderCount_rate < 0" style="color:red;"
              >{{ formdata1.orderCount_rate }}%<i
                class="el-icon-bottom"
                style="font-size:14px;"
              ></i
            ></span>
            <span v-else style="color:green"
              >{{ formdata1.orderCount_rate }}%<i
                class="el-icon-top"
                style="font-size:14px;"
              ></i
            ></span>
          </div>
        </div>
        <div style="margin-left:10px;">
          <div style="font-weight:bold;">下单总金额（元）</div>
          <div>{{ formdata1.orderPayPriceSum }}</div>
          <div style="font-weight:bold;">
            较前一天
            <span v-if="formdata1.orderPayPriceSum_rate < 0" style="color:red;"
              >{{ formdata1.orderPayPriceSum_rate }}%<i
                class="el-icon-bottom"
                style="font-size:14px;"
              ></i
            ></span>
            <span v-else style="color:green"
              >{{ formdata1.orderPayPriceSum_rate }}%<i
                class="el-icon-top"
                style="font-size:14px;"
              ></i
            ></span>
          </div>
        </div>
      </div>
      <div class="top-box" style="margin-bottom:40px;">
        <div>
          <div style="font-weight:bold;">付款人数（人）</div>
          <div>{{ formdata1.orderPayUserNumber }}</div>
          <div style="font-weight:bold;">
            较前一天
            <span
              v-if="formdata1.orderPayUserNumber_rate < 0"
              style="color:red;"
              >{{ formdata1.orderPayUserNumber_rate }}%<i
                class="el-icon-bottom"
                style="font-size:14px;"
              ></i
            ></span>
            <span v-else style="color:green"
              >{{ formdata1.orderPayUserNumber_rate }}%<i
                class="el-icon-top"
                style="font-size:14px;"
              ></i
            ></span>
          </div>
        </div>
        <div style="margin-left:10px;">
          <div style="font-weight:bold;">付款订单数（笔）</div>
          <div>{{ formdata1.payOrderCount }}</div>
          <div style="font-weight:bold;">
            较前一天
            <span v-if="formdata1.payOrderCount_rate < 0" style="color:red;"
              >{{ formdata1.payOrderCount_rate }}%<i
                class="el-icon-bottom"
                style="font-size:14px;"
              ></i
            ></span>
            <span v-else style="color:green"
              >{{ formdata1.payOrderCount_rate }}%<i
                class="el-icon-top"
                style="font-size:14px;"
              ></i
            ></span>
          </div>
        </div>
        <div style="margin-left:10px;">
          <div style="font-weight:bold;">付款金额（元）</div>
          <div>{{ formdata1.orderPayPrice }}</div>
          <div style="font-weight:bold;">
            较前一天
            <span v-if="formdata1.orderPayPrice_rate < 0" style="color:red;"
              >{{ formdata1.orderPayPrice_rate }}%<i
                class="el-icon-bottom"
                style="font-size:14px;"
              ></i
            ></span>
            <span v-else style="color:green"
              >{{ formdata1.orderPayPrice_rate }}%<i
                class="el-icon-top"
                style="font-size:14px;"
              ></i
            ></span>
          </div>
        </div>
        <div style="margin-left:10px;">
          <div style="font-weight:bold;">付款商品件数（件）</div>
          <div>{{ formdata1.orderPayGoodsNumber }}</div>
          <div style="font-weight:bold;">
            较前一天
            <span
              v-if="formdata1.orderPayGoodsNumber_rate < 0"
              style="color:red;"
              >{{ formdata1.orderPayGoodsNumber_rate }}%<i
                class="el-icon-bottom"
                style="font-size:14px;"
              ></i
            ></span>
            <span v-else style="color:green"
              >{{ formdata1.orderPayGoodsNumber_rate }}%<i
                class="el-icon-top"
                style="font-size:14px;"
              ></i
            ></span>
          </div>
        </div>
        <div style="margin-left:10px;">
          <div style="font-weight:bold;">客单价（元）</div>
          <div>{{ formdata1.unitPricePerCustomer }}</div>
          <div style="font-weight:bold;">
            较前一天
            <span
              v-if="formdata1.unitPricePerCustomer_rate < 0"
              style="color:red;"
              >{{ formdata1.unitPricePerCustomer_rate }}%<i
                class="el-icon-bottom"
                style="font-size:14px;"
              ></i
            ></span>
            <span v-else style="color:green"
              >{{ formdata1.unitPricePerCustomer_rate }}%<i
                class="el-icon-top"
                style="font-size:14px;"
              ></i
            ></span>
          </div>
        </div>
      </div>
      <div style="position: absolute;top: 30px;right:100px;">
        <img style="height: 340px" src="../../assets/image/shuju.png" alt="" />
        <div
          style="position:absolute;top:105px;right:90px;color:#69A1F3;text-align:left;width:40px;"
        >
          {{ formdata1.user_order_rate }}%
        </div>
        <div
          style="position:absolute;top:136px;right:-20px;color:#F6544A;font-size:16px;text-align:left;width:40px;"
        >
          {{ formdata1.user_pay_rate }}%
        </div>
        <div
          style="position:absolute;top:204px;right:45px;color:#5ACA79;text-align:left;width:40px;"
        >
          {{ formdata1.order_pay_rate }}%
        </div>
      </div>
    </div>
    <div class="wlm-form" v-loading="loading7">
      <div
        class="wlm-form-header"
        style="display:flex;justify-content:space-between;"
      >
      <div>
         <span>自定义看板</span>
         <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time13}}
          <el-button type="text" @click="updatabtn13">更新数据</el-button>
        </span>
      </div>
        <el-select v-model="value7" placeholder="请选择" @change="changebtn7">
          <el-option
            v-for="item in options7"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="views-container">
        <div id="echart9"></div>
      </div>
    </div>
    <div class="wlm-form" v-loading="loading6">
      <div
        class="wlm-form-header"
        style="display:flex;justify-content:space-between;"
      >
        <div> 交易看板
        <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;"> 更新时间：{{data_update_time1}}
                <el-button type="text" @click="updatabtn6">更新数据</el-button>
             </span>
        </div>
        <el-select v-model="value2" placeholder="请选择" @change="changebtn3">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="views-container">
        <div id="echart5"></div>
      </div>
    </div>
    <section
      class="flex-row "
      style="display:flex;justify-content:space-between; flex-wrap:wrap;"
    >
      <div class="wlm-form" v-loading="loading20">
        <div class="wlm-form-header" >
          <div style="display:flex;justify-content:space-between;">
            <span>用户访问时间段
              <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
                  更新时间：{{data_update_time20}}
                  <el-button type="text" @click="updatabtn20">更新数据</el-button>
                </span>
            </span>
            <el-select
              v-model="value20"
              placeholder="请选择"
              @change="changebtn20"
            >
              <el-option
                v-for="item in options20"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
            <div class="views-container">
              <div id="echart20"></div>
            </div>
      </div>
      <div class="wlm-form" v-loading="loading2">
        <div class="wlm-form-header">
          <div style="display:flex;justify-content:space-between;">
            <span>渠道销量
              <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
                  更新时间：{{data_update_time2}}
                  <el-button type="text" @click="updatabtn2">更新数据</el-button>
                </span>
            </span>
            <el-select
              v-model="value1"
              placeholder="请选择"
              @change="changebtn2"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="views-container">
          <div id="echart1"></div>
        </div>
      </div>
      <div class="wlm-form" v-loading="loading3">
        <div class="wlm-form-header">
          <span>商品分类销量
            <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time3}}
          <el-button type="text" @click="updatabtn3">更新数据</el-button>
        </span>
          </span>
        </div>
            <div class="views-container">
              <div id="echart2"></div>
            </div>
      </div>
      <div class="wlm-form" v-loading="loading4">
        <div class="wlm-form-header">
          <span>商品销量排行Top10</span>
           <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time4}}
          <el-button type="text" @click="updatabtn4">更新数据</el-button>
        </span>
        </div>
        <div class="views-container">
          <div id="echart3"></div>
        </div>
      </div>
      <div class="wlm-form" v-loading="loading5">
        <div class="wlm-form-header">
          <span>商家销量排行Top10</span>
           <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time5}}
          <el-button type="text" @click="updatabtn5">更新数据</el-button>
        </span>
        </div>
            <div class="views-container">
              <div id="echart4"></div>
            </div>
      </div>
    </section>
    <!-- 用户看板 -->
    <div class="wlm-form" v-loading="loading10">
      <div
        class="wlm-form-header"
        style="display:flex;justify-content:space-between;"
      >
       <div>
          <span>用户看板</span>
         <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time10}}
          <el-button type="text" @click="updatabtn10">更新数据</el-button>
        </span>
       </div>
        <el-select v-model="value6" placeholder="请选择" @change="changebtn6">
          <el-option
            v-for="item in options6"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="views-container">
        <div id="echart6"></div>
      </div>
    </div>
    <section
      class="flex-row "
      style="display:flex;justify-content:space-between; flex-wrap:wrap;"
    >
      <div class="wlm-form" v-loading="loading8">
        <div class="wlm-form-header">
          <div style="display:flex;justify-content:space-between;">
             <div>
          <span>用户活跃率</span>
         <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time11}}
          <el-button type="text" @click="updatabtn11">更新数据</el-button>
        </span>
       </div>
            <el-select
              v-model="value4"
              placeholder="请选择"
              @change="changebtn4"
            >
              <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="views-container">
          <div id="echart7"></div>
        </div>
      </div>
      <div class="wlm-form" v-loading="loading9">
        <div class="wlm-form-header">
          <div style="display:flex;justify-content:space-between;">
            <div>
               <span>新增用户</span>
         <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time12}}
          <el-button type="text" @click="updatabtn12">更新数据</el-button>
        </span>
            </div>
            <el-select
              v-model="value5"
              placeholder="请选择"
              @change="changebtn5"
            >
              <el-option
                v-for="item in options5"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="wlm-form-header">
          <div class="views-container">
            <div class="views-container">
              <div id="echart8"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
  </div>
</template>
<script>
import {
  funnelDiagram,
  channelSales,
  classSales,
  businessSalesTop10,
  goodsSalesTop10,
  moneyStatistics,
  userActiveRate,
  newUserCount,
  userAnalysis,
  selfData,
  goodsLookTime
} from "@/api/basicdata";
export default {
  data() {
    return {
      num1:1,
      num2:1,
      num3:1,
      num10:1,
      num11:1,
      num12:1,
      num13:1,
      num20:1,
      data_update_time1:'',
      data_update_time2:'',
      data_update_time3:'',
      data_update_time4:'',
      data_update_time5:'',
      data_update_time10:'',
      data_update_time11:'',
      data_update_time12:'',
      data_update_time13:'',
      data_update_time20:'',
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      loading6: false,
      loading7: false,
      loading8: false,
      loading9: false,
      loading10: false,
      loading20: false,
      value: "1",
      value1: "1",
      value2: "1",
      value3: "1",
      value4: "1",
      value5: "1",
      value6: "1",
      value7: "1",
      value20: "1",
      options: [
        {
          value: "1",
          label: "昨天与前天比较"
        },
        {
          value: "2",
          label: "本周与上周比较"
        },
        {
          value: "3",
          label: "本月与上月比较"
        }
      ],
      options1: [
        {
          value: "1",
          label: "近7天"
        },
        {
          value: "2",
          label: "近一个月"
        },
        {
          value: "3",
          label: "近一年"
        }
      ],
      options2: [
        {
          value: "1",
          label: "近7天"
        },
        {
          value: "2",
          label: "近一个月"
        },
        {
          value: "3",
          label: "近一年"
        }
      ],
      options3: [
        {
          value: "1",
          label: "近7天"
        },
        {
          value: "2",
          label: "近一个月"
        },
        {
          value: "3",
          label: "近一年"
        }
      ],
      options4: [
        {
          value: "1",
          label: "今日"
        },
        {
          value: "2",
          label: "昨天"
        },
        {
          value: "3",
          label: "本周"
        },
        {
          value: "4",
          label: "本月"
        }
      ],
      options5: [
        {
          value: "1",
          label: "近7天"
        },
        {
          value: "2",
          label: "近一个月"
        },
        {
          value: "3",
          label: "近一年"
        }
      ],
       options6: [
        {
          value: "1",
          label: "近7天"
        },
        {
          value: "2",
          label: "近一个月"
        },
        {
          value: "3",
          label: "近一年"
        }
      ],
      options7: [
        {
          value: "1",
          label: "近7天"
        },
        {
          value: "2",
          label: "近一个月"
        },
        {
          value: "3",
          label: "近一年"
        }
      ],
      options20: [
        {
          value: "1",
          label: "近7天"
        },
        {
          value: "2",
          label: "近一个月"
        },
        {
          value: "3",
          label: "近一年"
        }
      ],
      formdata1: {
        lookGoodsUserNumber: "", //访问人数
        lookGoodsNumber: "", //商品浏览次量
        orderUserNumber: "", //下单人数
        orderCount: "", //商城订单数
        orderPayPriceSum: "", //下单总金额
        orderPayUserNumber: "", //付款人数
        payOrderCount: "", //付款订单数
        orderPayPrice: "", //付款金额
        orderPayGoodsNumber: "", //付款商品件数
        unitPricePerCustomer: "", //客单价
        user_order_rate: "", //下单转化率
        order_pay_rate: "", //付款转化率
        user_pay_rate: "", //访客下单转化率
        lookGoodsUserNumber_rate: "", //访问人数增长比率
        lookGoodsNumber_rate: "", //商品浏览次量增长比率
        orderUserNumber_rate: "", //下单人数增长比率
        orderCount_rate: "", //商城订单数增长比率
        orderPayPriceSum_rate: "", //下单总金额增长比率
        payOrderCount_rate: "", //付款人数增长比率
        orderPayUserNumber_rate: "", //付款订单数增长比率
        orderPayPrice_rate: "", //付款金额增长比率
        orderPayGoodsNumber_rate: "", //付款商品件数增长比率
        unitPricePerCustomer_rate: "", //客单价增长比率
        data_update_time:'',
      }
    };
  },
  created() {
    this.funnelDiagrambtn();
  },
  mounted() {
    this.drawLine1();
    this.drawLine2();
    this.drawLine3();
    this.drawLine4();
    this.drawLine5();
    this.drawLine6();
    this.drawLine7();
    this.drawLine8();
    this.drawLine9();
    this.drawLine20();
  },
  methods: {
    changebtn20(event){
        this.loading20 = true
        this.num20 = event
      goodsLookTime({type:event}).then(res=>{
        if(res.data.code==1){
          this.loading20 = false
           this.data_update_time20 = res.data.data.data_update_time
           let x= []
          const series = [
            {
              name: "时间段访问人数",
              type: "line",
              data: []
            },
            {
              name: "时间段访问量",
              type: "line",
              data: []
            },
          ];
          if(res.data.data.data_update_time && res.data.data.look_number){
             let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            let look_user = Object.values(res.data.data.look_user)
            let look_number = Object.values(res.data.data.look_number)
            look_user.forEach(item=>{
              x.push(item.date)
              series[0].data.push(item.value)
            })
            look_number.forEach(item=>{
              series[1].data.push(item.value)
            })
          }
           
          const myEchart = this.$echarts.init(
            document.getElementById("echart20"),
            "macarons"
          );
          myEchart.setOption({
             title: {
                  text: '暂无数据',
                  x: 'center',
                  y: 'center',
                  textStyle: {
                      color: '#fff',
                      fontWeight: 'normal',
                      fontSize: 16
                  }
              },

            tooltip: {
              trigger: "axis"
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: ['时间段访问人数','时间段访问量'],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          })
        }
      })
    },
    changebtn7(event){
        this.loading7 = true
        this.num13 = event
      selfData({type:event}).then(res=>{
        if(res.data.code==1){
          this.loading7 = false
          let rgbdata =['199,237,233','175,215,237','92,167,186','255,66,93','147,224,255','248,232,137','84,115,135','205,201,125','236,230,170'] 
          this.data_update_time13 = res.data.data.data_update_time
          let x= []
          let z = []
          let series = []
              let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
          res.data.data.forEach((item,index)=>{
           series.push({name:item.name,data:[],type:'line',stack:'总量', areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb('+rgbdata[index]+')'
                }, {
                    offset: 1,
                    color: '#ffffff'
                }])
            },itemStyle:{
              color: 'rgb('+rgbdata[index]+')'
            }})
             let items = Object.keys(item.data);
             let itemsdata = Object.values(item.data);
              x=items
             series[index].data = itemsdata
             series.forEach(o=>{
             z.push(o.name)
             })
          })
            const myEchart = this.$echarts.init(
            document.getElementById("echart9"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: z,
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false,
              name: '(日期)',// 横轴名称
              axisLabel: {
                            show: true,
                            fontSize: 12,
                             fontWeight: 'bold',
                            textStyle: {
                                color: '#1890FF'
                            }
                        },
                  axisLine:{
                  lineStyle:{
                      color:'#1890FF',
                      width:2,//这里是为了突出显示加上的
                  }
              } 
            },
            yAxis: {
              type: "value",
              name: '(对应数据值)',// 横轴名称
              axisLabel: {
                            show: true,
                            fontSize: 12,
                             fontWeight: 'bold',
                            textStyle: {
                                color: '#1890FF'
                            }
                        },
                         axisLine:{
                  lineStyle:{
                      color:'#1890FF',
                      width:2,//这里是为了突出显示加上的
                  }
              }
            },
            series: series
          });
        }
      })
    },
    changebtn6(event){
      this.loading10 = true
          this.num10 = event
      userAnalysis({type:event}).then(res=>{
        if(res.data.code==1){
          this.loading10 = false
          this.data_update_time10 = res.data.data.data_update_time
             const x = [];
          const series = [
            {
              name: "总用户",
              type: "line",
              data: []
            },
            {
              name: "新增用户",
              type: "line",
              data: []
            },
            {
              name: "小程序渠道用户",
              type: "line",
              data: []
            },
            {
              name: "公众号渠道用户",
              type: "line",
              data: []
            },
            {
              name: "已下单用户",
              type: "line",
              data: []
            },
            {
              name: "未下单用户",
              type: "line",
              data: []
            },
            {
              name: "付款用户",
              type: "line",
              data: []
            },
            {
              name: "会员用户总数",
              type: "line",
              data: []
            },
            {
              name: "分销商总数",
              type: "line",
              data: []
            },
            {
              name: "分销商客户总数",
              type: "line",
              data: []
            },
            {
              name: "已绑定手机号用户",
              type: "line",
              data: []
            },
            {
              name: "已关注公众号用户",
              type: "line",
              data: []
            },
            {
              name: "流失用户",
              type: "line",
              data: []
            },
            {
              name: "潜在用户",
              type: "line",
              data: []
            },
            {
              name: "活跃用户",
              type: "line",
              data: []
            },
          ];
           let userNumberSum = Object.values(res.data.data.userNumberSum);
           let newUserNumberSum = Object.values(res.data.data.newUserNumberSum);
           let sAppUserNumber = Object.values(res.data.data.sAppUserNumber);
           let weChatUserNumber = Object.values(res.data.data.weChatUserNumber);
           let haveOrderUserNumber = Object.values(res.data.data.haveOrderUserNumber);
           let haveNotOrderUserNumber = Object.values(res.data.data.haveNotOrderUserNumber);
           let orderPayUserNumber = Object.values(res.data.data.orderPayUserNumber);
           let vipUserNumber = Object.values(res.data.data.vipUserNumber);
           let dealerNumberSum = Object.values(res.data.data.dealerNumberSum);
           let customerNumber = Object.values(res.data.data.customerNumber);
           let bindMobileUserNumber = Object.values(res.data.data.bindMobileUserNumber);
           let haveInWeChatUserNumber = Object.values(res.data.data.haveInWeChatUserNumber);
           let lossUserNumber = Object.values(res.data.data.lossUserNumber);
           let potentialUserNumber = Object.values(res.data.data.potentialUserNumber);
           let activeUserNumber = Object.values(res.data.data.activeUserNumber);
            userNumberSum.forEach(res => {
            x.push(res.date);
            series[0].data.push(res.value);
          });
          newUserNumberSum.forEach(res => {
            series[1].data.push(res.value);
          });
          sAppUserNumber.forEach(res => {
            series[2].data.push(res.value);
          });
          weChatUserNumber.forEach(res => {
            series[3].data.push(res.value);
          });
          haveOrderUserNumber.forEach(res => {
            series[4].data.push(res.value);
          });
           haveNotOrderUserNumber.forEach(res => {
            series[5].data.push(res.value);
          });
          orderPayUserNumber.forEach(res => {
            series[6].data.push(res.value);
          });
          vipUserNumber.forEach(res => {
            series[7].data.push(res.value);
          });
          dealerNumberSum.forEach(res => {
            series[8].data.push(res.value);
          });
          customerNumber.forEach(res => {
            series[9].data.push(res.value);
          });
          bindMobileUserNumber.forEach(res => {
            series[10].data.push(res.value);
          });
          haveInWeChatUserNumber.forEach(res => {
            series[11].data.push(res.value);
          });
          lossUserNumber.forEach(res => {
            series[12].data.push(res.value);
          });
          potentialUserNumber.forEach(res => {
            series[13].data.push(res.value);
          });
          activeUserNumber.forEach(res => {
            series[14].data.push(res.value);
          });
           const myEchart = this.$echarts.init(
            document.getElementById("echart6"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis"
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: ['总用户','新增用户','小程序渠道用户','公众号渠道用户','已下单用户','未下单用户','付款用户','会员用户总数','分销商总数',
              '分销商客户总数','已绑定手机号用户','已关注公众号用户','流失用户','潜在用户','活跃用户'],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      })
    },
    changebtn5(event) {
      this.loading9 = true;
      this.num12 =  event
      newUserCount({ type: event }).then(res => {
        if (res.data.code == 1) {
          this.loading9 = false;
          const x = [];
          const series = [
            {
              type: "line",
              data: []
            }
          ];
          let value1 = Object.values(res.data.data);
          // console.log("dggggggggggggggggg",value1.date)
          value1.forEach(item => {
            x.push(item.date);
            series[0].data.push(item.num);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart8"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis"
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              boundaryGap: false,
              data: x
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      });
    },
    changebtn4(event) {
        this.loading8 = true
        this.num11 = event
        userActiveRate({ type: event }).then(res => {
          if (res.data.code == 1) {
            this.loading8 = false;
            const x = [];
            const a = res.data.data.user_active_rate+'%'
           
            x.push(
                { value: res.data.data.no_viewed_count, name: "未访问用户数" },
                { value: res.data.data.user_viewed_count, name: "访问用户数" }
              );

            const myEchart = this.$echarts.init(
              document.getElementById("echart7"),
              "macarons"
            );
            myEchart.setOption({
              title: {
                text: a,
                x: "center", //文字位置
                y: "center" //文字位置
              },
              tooltip: {},
              series: [
                {
                  name: "pie",
                  type: "pie",
                  radius: ["50%", "70%"],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: "center"
                  },
                  emphasis: {
                    label: {
                      show: false,
                      fontSize: "16",
                      fontWeight: "bold"
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  
                  data: x
                }
              ]
            });
          }
        });
    },
    changebtn3(event) {
      this.loading6 = true;
      this.num2 = event
      moneyStatistics({ type: event }).then(res => {
        if (res.data.code == 1) {
          this.loading6 = false;
          const x = [];
          const series = [
            {
              name: "总交易额",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "订单总数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "访问人数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "下单人数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "付款人数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "付款订单数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "商品总销量",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "分销总佣金",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "客单价",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "访客下单转化率",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "下单付款转化率",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "访客付款转化率",
              type: "line",
              stack: "总量",
              data: []
            }
          ];
          let totalTurnover = Object.values(res.data.data.totalTurnover);
          let orderCountSum = Object.values(res.data.data.orderCountSum);
          let lookGoodsUserNumber = Object.values(
            res.data.data.lookGoodsUserNumber
          );
          let orderUserNumber = Object.values(res.data.data.orderUserNumber);
          let orderPayUserNumber = Object.values(
            res.data.data.orderPayUserNumber
          );
          let payOrderCount = Object.values(res.data.data.payOrderCount);
          let goodsSalesSum = Object.values(res.data.data.goodsSalesSum);
          let dealerOrderCommission = Object.values(
            res.data.data.dealerOrderCommission
          );
          let userPriceRate = Object.values(res.data.data.userPriceRate);
          let orderPayRate = Object.values(res.data.data.orderPayRate);
          let userPayRate = Object.values(res.data.data.userPayRate);
          // console.log("sssssffffffffffffffffffffff",totalTurnover)
          totalTurnover.forEach(res => {
            x.push(res.date);
            series[0].data.push(res.value);
          });
          orderCountSum.forEach(res => {
            series[1].data.push(res.value);
          });
          lookGoodsUserNumber.forEach(res => {
            series[2].data.push(res.value);
          });

          //下单人数
          orderUserNumber.forEach(res => {
            series[3].data.push(res.value);
          });
          orderPayUserNumber.forEach(res => {
            series[4].data.push(res.value);
          });
          payOrderCount.forEach(res => {
            series[5].data.push(res.value);
          });
          goodsSalesSum.forEach(res => {
            series[6].data.push(res.value);
          });
          dealerOrderCommission.forEach(res => {
            series[7].data.push(res.value);
          });
          userPriceRate.forEach(res => {
            series[8].data.push(res.value);
          });
          orderPayRate.forEach(res => {
            series[9].data.push(res.value);
          });
          userPayRate.forEach(res => {
            series[10].data.push(res.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart5"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis"
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: [
                {
                  name: "总交易额"
                },
                {
                  name: "订单总数"
                },
                {
                  name: "访问人数"
                },
                {
                  name: "下单人数"
                },
                {
                  name: "付款人数"
                },
                {
                  name: "付款订单数"
                },
                {
                  name: "商品总销量"
                },
                {
                  name: "分销总佣金"
                },
                {
                  name: "客单价"
                },
                {
                  name: "下单付款转化率"
                },
                {
                  name: "访客付款转化率"
                }
              ],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      });
    },
    updatabtn6(){
      this.loading6 = true;
      moneyStatistics({ type: this.num2,update:1}).then(res => {
        if (res.data.code == 1) {
          this.loading6 = false;
          const x = [];
          const series = [
            {
              name: "总交易额",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "订单总数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "访问人数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "下单人数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "付款人数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "付款订单数",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "商品总销量",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "分销总佣金",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "客单价",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "访客下单转化率",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "下单付款转化率",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "访客付款转化率",
              type: "line",
              stack: "总量",
              data: []
            }
          ];
          let totalTurnover = Object.values(res.data.data.totalTurnover);
          let orderCountSum = Object.values(res.data.data.orderCountSum);
          let lookGoodsUserNumber = Object.values(
            res.data.data.lookGoodsUserNumber
          );
          let orderUserNumber = Object.values(res.data.data.orderUserNumber);
          let orderPayUserNumber = Object.values(
            res.data.data.orderPayUserNumber
          );
          let payOrderCount = Object.values(res.data.data.payOrderCount);
          let goodsSalesSum = Object.values(res.data.data.goodsSalesSum);
          let dealerOrderCommission = Object.values(
            res.data.data.dealerOrderCommission
          );
          let userPriceRate = Object.values(res.data.data.userPriceRate);
          let orderPayRate = Object.values(res.data.data.orderPayRate);
          let userPayRate = Object.values(res.data.data.userPayRate);
          // console.log("sssssffffffffffffffffffffff",totalTurnover)
          totalTurnover.forEach(res => {
            x.push(res.date);
            series[0].data.push(res.value);
          });
          orderCountSum.forEach(res => {
            series[1].data.push(res.value);
          });
          lookGoodsUserNumber.forEach(res => {
            series[2].data.push(res.value);
          });

          //下单人数
          orderUserNumber.forEach(res => {
            series[3].data.push(res.value);
          });
          orderPayUserNumber.forEach(res => {
            series[4].data.push(res.value);
          });
          payOrderCount.forEach(res => {
            series[5].data.push(res.value);
          });
          goodsSalesSum.forEach(res => {
            series[6].data.push(res.value);
          });
          dealerOrderCommission.forEach(res => {
            series[7].data.push(res.value);
          });
          userPriceRate.forEach(res => {
            series[8].data.push(res.value);
          });
          orderPayRate.forEach(res => {
            series[9].data.push(res.value);
          });
          userPayRate.forEach(res => {
            series[10].data.push(res.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart5"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis"
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: [
                {
                  name: "总交易额"
                },
                {
                  name: "订单总数"
                },
                {
                  name: "访问人数"
                },
                {
                  name: "下单人数"
                },
                {
                  name: "付款人数"
                },
                {
                  name: "付款订单数"
                },
                {
                  name: "商品总销量"
                },
                {
                  name: "分销总佣金"
                },
                {
                  name: "客单价"
                },
                {
                  name: "下单付款转化率"
                },
                {
                  name: "访客付款转化率"
                }
              ],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      });
    },
    changebtn1(event) {
      //   console.log("ssss", event);
      this.loading1 = true;
      this.num1= event
      funnelDiagram({ type: event }).then(res => {
        if (res.data.code == 1) {
          this.loading1 = false;
          this.formdata1 = res.data.data;
        }
      });
    },
    updatabtn1(){
        this.loading1 = true;
      funnelDiagram({ type: this.num1,update:1}).then(res => {
        if (res.data.code == 1) {
          this.loading1 = false;
          this.formdata1 = res.data.data;
        }
      });
    },
    updatabtn20(){
       this.loading20 = true
      goodsLookTime({type:this.num20,update:1}).then(res=>{
        if(res.data.code==1){
          this.loading20 = false
           this.data_update_time20 = res.data.data.data_update_time
           let x= []
          const series = [
            {
              name: "时间段访问人数",
              type: "line",
              data: []
            },
            {
              name: "时间段访问量",
              type: "line",
              data: []
            },
          ];
          if(res.data.data.data_update_time && res.data.data.look_number){
             let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            let look_user = Object.values(res.data.data.look_user)
            let look_number = Object.values(res.data.data.look_number)
            look_user.forEach(item=>{
              x.push(item.date)
              series[0].data.push(item.value)
            })
            look_number.forEach(item=>{
              series[1].data.push(item.value)
            })
          }
           
          const myEchart = this.$echarts.init(
            document.getElementById("echart20"),
            "macarons"
          );
          myEchart.setOption({
             title: {
                  text: '暂无数据',
                  x: 'center',
                  y: 'center',
                  textStyle: {
                      color: '#fff',
                      fontWeight: 'normal',
                      fontSize: 16
                  }
              },

            tooltip: {
              trigger: "axis"
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: ['时间段访问人数','时间段访问量'],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          })
        }
      })
    },
    changebtn2(event) {
      this.loading2 = true;
      this.num3 = event
      channelSales({ type: event }).then(res => {
        if (res.data.code == 1) {
          console.log("66oooooooooooooooooooooo",res.data.data)
        this.data_update_time2 = res.data.data.data_update_time
          this.loading2 = false;
          const x = [];
          const series = [
            {
              name: "H5",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "小程序",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "公众号",
              type: "line",
              stack: "总量",
              data: []
            }
          ];
          let value1 = Object.values(res.data.data.h5_sales);
          let value2 = Object.values(res.data.data.sApp_sales);
          let value3 = Object.values(res.data.data.weChat_sales);
          value1.forEach(res => {
            x.push(res.date);
            series[0].data.push(res.total_num);
          });
          value2.forEach(res => {
            series[1].data.push(res.total_num);
          });
          value3.forEach(res => {
            series[2].data.push(res.total_num);
          });

          const myEchart = this.$echarts.init(
            document.getElementById("echart1"),
            "macarons"
          );
          myEchart.setOption({
            // title: {
            //   text: "渠道销量",
            //   color: "black"
            // },
            tooltip: {
              trigger: "axis"
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: [
                {
                  name: "H5"
                },
                {
                  name: "小程序"
                },
                {
                  name: "公众号"
                }
              ],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      });
    },
    updatabtn2(){
    this.loading2 = true;
      channelSales({ type: this.num3,update:1}).then(res => {
        if (res.data.code == 1) {
        this.data_update_time2 = res.data.data.data_update_time
          this.loading2 = false;
          const x = [];
          const series = [
            {
              name: "H5",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "小程序",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "公众号",
              type: "line",
              stack: "总量",
              data: []
            }
          ];
          let value1 = Object.values(res.data.data.h5_sales);
          let value2 = Object.values(res.data.data.sApp_sales);
          let value3 = Object.values(res.data.data.weChat_sales);
          value1.forEach(res => {
            x.push(res.date);
            series[0].data.push(res.total_num);
          });
          value2.forEach(res => {
            series[1].data.push(res.total_num);
          });
          value3.forEach(res => {
            series[2].data.push(res.total_num);
          });

          const myEchart = this.$echarts.init(
            document.getElementById("echart1"),
            "macarons"
          );
          myEchart.setOption({
            // title: {
            //   text: "渠道销量",
            //   color: "black"
            // },
            tooltip: {
              trigger: "axis"
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: [
                {
                  name: "H5"
                },
                {
                  name: "小程序"
                },
                {
                  name: "公众号"
                }
              ],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      });
    },
    updatabtn3(){
      this.loading3 = true;
      classSales({update:1}).then(res => {
        if (res.data.code == 1) {
          this.loading3 = false;
          this.data_update_time3 = res.data.data.data_update_time
          let x = [];
          let data_update_time = res.data.data.data_update_time;
          delete res.data.data.data_update_time;
           res.data.data = Object.values(res.data.data)
          res.data.data.forEach(item => {
            x.push({ value: item.total_num, name: item.name });
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart2"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {},
            series: [
              {
                name: "pie",
                type: "pie",
                selectedMode: "single",
                selectedOffset: 30,
                clockwise: true,
                data: x
              }
            ]
          });
        }
      });
    },
    updatabtn4(){
      this.loading4 = true;
      goodsSalesTop10({update:1}).then(res => {
        if (res.data.code == 1) {
          this.loading4 = false;
          this.data_update_time4 = res.data.data.data_update_time
          const x = [];
          const series = [
            {
              type: "bar",
              data: [],
            }
          ];
            let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
          res.data.data.forEach(item => {
            x.push(item.goods_name);
            //   console.log("sfffffffff",myEchart.setOption.series)
            series[0].data.push(item.total_num);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart3"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse: true,//倒叙
              axisLabel:{
                // 处理Y轴名字过长
                formatter:function(params){
                    var val="";
                    if(params.length >4){
                        val = params.substr(0,6)+'...';
                        console.log("fdfds反倒是打死不合法1",val)
                        return val;
                    }else{
                      console.log("发剑荡四方京东搜if",params)
                        return params;
                    }
              }
              }

            },
            //  triggerEvent: true,
            series: series
          });
        }
      });
    },
    updatabtn5(){
      this.loading5 = true;
      businessSalesTop10({update:1}).then(res => {
        if (res.data.code == 1) {
          this.loading5 = false;
          this.data_update_time5 = res.data.data.data_update_time
          const x = [];
          const series = [
            {
              // name: "2020年",
              type: "bar",
              data: [],
              barWidth: 20,
            }
          ];
             let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
          res.data.data.forEach(item => {
            x.push(item.name);
            //   console.log("sfffffffff",myEchart.setOption.series)
            series[0].data.push(item.total_num);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart4"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse: true,//倒叙
              axisLabel:{
                // 处理Y轴名字过长
                formatter:function(params){
                    var val="";
                    if(params.length >4){
                        val = params.substr(0,6)+'...';
                        console.log("fdfds反倒是打死不合法1",val)
                        return val;
                    }else{
                      console.log("发剑荡四方京东搜if",params)
                        return params;
                    }
              }
              }
            },
            series: series
          });
        }
      });
    },
    updatabtn10(){
      this.loading10 = true
      userAnalysis({type:this.num10,update:1}).then(res=>{
        if(res.data.code==1){
          this.loading10 = false
          this.data_update_time10 = res.data.data.data_update_time
             const x = [];
          const series = [
            {
              name: "总用户",
              type: "line",
              data: []
            },
            {
              name: "新增用户",
              type: "line",
              data: []
            },
            {
              name: "小程序渠道用户",
              type: "line",
              data: []
            },
            {
              name: "公众号渠道用户",
              type: "line",
              data: []
            },
            {
              name: "已下单用户",
              type: "line",
              data: []
            },
            {
              name: "未下单用户",
              type: "line",
              data: []
            },
            {
              name: "付款用户",
              type: "line",
              data: []
            },
            {
              name: "会员用户总数",
              type: "line",
              data: []
            },
            {
              name: "分销商总数",
              type: "line",
              data: []
            },
            {
              name: "分销商客户总数",
              type: "line",
              data: []
            },
            {
              name: "已绑定手机号用户",
              type: "line",
              data: []
            },
            {
              name: "已关注公众号用户",
              type: "line",
              data: []
            },
            {
              name: "流失用户",
              type: "line",
              data: []
            },
            {
              name: "潜在用户",
              type: "line",
              data: []
            },
            {
              name: "活跃用户",
              type: "line",
              data: []
            },
          ];
           let userNumberSum = Object.values(res.data.data.userNumberSum);
           let newUserNumberSum = Object.values(res.data.data.newUserNumberSum);
           let sAppUserNumber = Object.values(res.data.data.sAppUserNumber);
           let weChatUserNumber = Object.values(res.data.data.weChatUserNumber);
           let haveOrderUserNumber = Object.values(res.data.data.haveOrderUserNumber);
           let haveNotOrderUserNumber = Object.values(res.data.data.haveNotOrderUserNumber);
           let orderPayUserNumber = Object.values(res.data.data.orderPayUserNumber);
           let vipUserNumber = Object.values(res.data.data.vipUserNumber);
           let dealerNumberSum = Object.values(res.data.data.dealerNumberSum);
           let customerNumber = Object.values(res.data.data.customerNumber);
           let bindMobileUserNumber = Object.values(res.data.data.bindMobileUserNumber);
           let haveInWeChatUserNumber = Object.values(res.data.data.haveInWeChatUserNumber);
           let lossUserNumber = Object.values(res.data.data.lossUserNumber);
           let potentialUserNumber = Object.values(res.data.data.potentialUserNumber);
           let activeUserNumber = Object.values(res.data.data.activeUserNumber);
            userNumberSum.forEach(res => {
            x.push(res.date);
            series[0].data.push(res.value);
          });
          newUserNumberSum.forEach(res => {
            series[1].data.push(res.value);
          });
          sAppUserNumber.forEach(res => {
            series[2].data.push(res.value);
          });
          weChatUserNumber.forEach(res => {
            series[3].data.push(res.value);
          });
          haveOrderUserNumber.forEach(res => {
            series[4].data.push(res.value);
          });
           haveNotOrderUserNumber.forEach(res => {
            series[5].data.push(res.value);
          });
          orderPayUserNumber.forEach(res => {
            series[6].data.push(res.value);
          });
          vipUserNumber.forEach(res => {
            series[7].data.push(res.value);
          });
          dealerNumberSum.forEach(res => {
            series[8].data.push(res.value);
          });
          customerNumber.forEach(res => {
            series[9].data.push(res.value);
          });
          bindMobileUserNumber.forEach(res => {
            series[10].data.push(res.value);
          });
          haveInWeChatUserNumber.forEach(res => {
            series[11].data.push(res.value);
          });
          lossUserNumber.forEach(res => {
            series[12].data.push(res.value);
          });
          potentialUserNumber.forEach(res => {
            series[13].data.push(res.value);
          });
          activeUserNumber.forEach(res => {
            series[14].data.push(res.value);
          });
           const myEchart = this.$echarts.init(
            document.getElementById("echart6"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis"
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: ['总用户','新增用户','小程序渠道用户','公众号渠道用户','已下单用户','未下单用户','付款用户','会员用户总数','分销商总数',
              '分销商客户总数','已绑定手机号用户','已关注公众号用户','流失用户','潜在用户','活跃用户'],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      })
    },
    updatabtn11(){
     this.loading8 = true
        userActiveRate({ type: this.num11,update:1 }).then(res => {
          if (res.data.code == 1) {
            this.data_update_time11 = res.data.data.data_update_time
            this.loading8 = false;
            const x = [];
            const a = res.data.data.user_active_rate+'%'
           
            x.push(
                { value: res.data.data.no_viewed_count, name: "未访问用户数" },
                { value: res.data.data.user_viewed_count, name: "访问用户数" }
              );

            const myEchart = this.$echarts.init(
              document.getElementById("echart7"),
              "macarons"
            );
            myEchart.setOption({
              title: {
                text: a,
                x: "center", //文字位置
                y: "center" //文字位置
              },
              tooltip: {},
              series: [
                {
                  name: "pie",
                  type: "pie",
                  radius: ["50%", "70%"],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: "center"
                  },
                  emphasis: {
                    label: {
                      show: false,
                      fontSize: "16",
                      fontWeight: "bold"
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  
                  data: x
                }
              ]
            });
          }
        });
    },
    updatabtn12(){
        this.loading9 = true;
      newUserCount({ type: this.num12,update:1 }).then(res => {
        if (res.data.code == 1) {
          this.data_update_time12 = res.data.data.data_update_time
          this.loading9 = false;
          const x = [];
          const series = [
            {
              type: "line",
              data: []
            }
          ];
          let value1 = Object.values(res.data.data);
          // console.log("dggggggggggggggggg",value1.date)
          value1.forEach(item => {
            x.push(item.date);
            series[0].data.push(item.num);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart8"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis"
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              boundaryGap: false,
              data: x
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      });
    },
    updatabtn13(){
      this.loading7 = true
      selfData({type:this.num13,update:1}).then(res=>{
        if(res.data.code==1){
          this.loading7 = false
          let rgbdata =['199,237,233','175,215,237','92,167,186','255,66,93','147,224,255','248,232,137','84,115,135','205,201,125','236,230,170'] 
          this.data_update_time13 = res.data.data.data_update_time
          let x= []
          let z = []
          let series = []
              let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
          res.data.data.forEach((item,index)=>{
           series.push({name:item.name,data:[],type:'line',stack:'总量', areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb('+rgbdata[index]+')'
                }, {
                    offset: 1,
                    color: '#ffffff'
                }])
            },itemStyle:{
              color: 'rgb('+rgbdata[index]+')'
            }})
             let items = Object.keys(item.data);
             let itemsdata = Object.values(item.data);
              x=items
             series[index].data = itemsdata
             series.forEach(o=>{
             z.push(o.name)
             })
          })
            const myEchart = this.$echarts.init(
            document.getElementById("echart9"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: z,
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false,
              name: '(日期)',// 横轴名称
              axisLabel: {
                            show: true,
                            fontSize: 12,
                             fontWeight: 'bold',
                            textStyle: {
                                color: '#1890FF'
                            }
                        },
                  axisLine:{
                  lineStyle:{
                      color:'#1890FF',
                      width:2,//这里是为了突出显示加上的
                  }
              } 
            },
            yAxis: {
              type: "value",
              name: '(对应数据值)',// 横轴名称
              axisLabel: {
                            show: true,
                            fontSize: 12,
                             fontWeight: 'bold',
                            textStyle: {
                                color: '#1890FF'
                            }
                        },
                         axisLine:{
                  lineStyle:{
                      color:'#1890FF',
                      width:2,//这里是为了突出显示加上的
                  }
              }
            },
            series: series
          });
        }
      })
    },
    funnelDiagrambtn() {
      this.loading1 = true;
      funnelDiagram({ type: 1 }).then(res => {
        if (res.data.code == 1) {
          this.loading1 = false;
          this.formdata1 = res.data.data;
        }
      });
    },
    // echart相关
    // 渠道销量
    // 后端返的数据格式是对象包对象的形式，所以把对象处理成数组，
    drawLine1() {
      this.loading2 = true;
      channelSales({ type: 1 }).then(res => {
        if (res.data.code == 1) {
          this.data_update_time2 = res.data.data.data_update_time
          this.loading2 = false;
          const x = [];
          const series = [
            {
              name: "H5",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "小程序",
              type: "line",
              stack: "总量",
              data: []
            },
            {
              name: "公众号",
              type: "line",
              stack: "总量",
              data: []
            }
          ];
          let value1 = Object.values(res.data.data.h5_sales);
          let value2 = Object.values(res.data.data.sApp_sales);
          let value3 = Object.values(res.data.data.weChat_sales);
          value1.forEach(res => {
            x.push(res.date);
            series[0].data.push(res.total_num);
          });
          value2.forEach(res => {
            series[1].data.push(res.total_num);
          });
          value3.forEach(res => {
            series[2].data.push(res.total_num);
          });

          const myEchart = this.$echarts.init(
            document.getElementById("echart1"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis"
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: [
                {
                  name: "H5"
                },
                {
                  name: "小程序"
                },
                {
                  name: "公众号"
                }
              ],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      });
    },
    // 商品分类销量
    drawLine2() {
      this.loading3 = true;
      classSales().then(res => {
        if (res.data.code == 1) {
          this.loading3 = false;
          this.data_update_time3 = res.data.data.data_update_time
          let x = [];
          let data_update_time = res.data.data.data_update_time;
          delete res.data.data.data_update_time;
           res.data.data = Object.values(res.data.data)
          res.data.data.forEach(item => {
            x.push({ value: item.total_num, name: item.name });
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart2"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {},
            series: [
              {
                name: "pie",
                type: "pie",
                selectedMode: "single",
                selectedOffset: 30,
                clockwise: true,
                data: x
              }
            ]
          });
        }
      });
    },
    //商品销量排行Top10
    drawLine3() {
      this.loading4 = true;
      goodsSalesTop10().then(res => {
        if (res.data.code == 1) {
          this.loading4 = false;
          this.data_update_time4 = res.data.data.data_update_time
          const x = [];
          const series = [
            {
              type: "bar",
              data: [],
            }
          ];
            let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
          res.data.data.forEach(item => {
            x.push(item.goods_name);
            //   console.log("sfffffffff",myEchart.setOption.series)
            series[0].data.push(item.total_num);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart3"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse: true,//倒叙
              axisLabel:{
                // 处理Y轴名字过长
                formatter:function(params){
                    var val="";
                    if(params.length >4){
                        val = params.substr(0,6)+'...';
                        console.log("fdfds反倒是打死不合法1",val)
                        return val;
                    }else{
                      console.log("发剑荡四方京东搜if",params)
                        return params;
                    }
              }
              }
            },
            series: series
          });
        }
      });
    },
    //商家销量排行Top10
    drawLine4() {
      this.loading5 = true;
      businessSalesTop10().then(res => {
        if (res.data.code == 1) {
          this.loading5 = false;
          this.data_update_time5 = res.data.data.data_update_time
          const x = [];
          const series = [
            {
              // name: "2020年",
              type: "bar",
              data: [],
              barWidth: 20,
            }
          ];
             let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
          res.data.data.forEach(item => {
            x.push(item.name);
            //   console.log("sfffffffff",myEchart.setOption.series)
            series[0].data.push(item.total_num);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart4"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse: true,//倒叙
              axisLabel:{
                // 处理Y轴名字过长
                formatter:function(params){
                    var val="";
                    if(params.length >4){
                        val = params.substr(0,6)+'...';
                        console.log("fdfds反倒是打死不合法1",val)
                        return val;
                    }else{
                      console.log("发剑荡四方京东搜if",params)
                        return params;
                    }
              }
              }
            },
            series: series
          });
        }
      });
    },
    //交易看板
    drawLine5() {
      this.loading6 = true;
      moneyStatistics({ type: 1 }).then(res => {
        if (res.data.code == 1) {
          this.data_update_time1 = res.data.data.data_update_time
          this.loading6 = false;
          const x = [];
          const series = [
            {
              name: "总交易额",
              type: "line",
              stack: "总交易额",
              data: []
            },
            {
              name: "订单总数",
              type: "line",
              stack: "订单总数",
              data: []
            },
            {
              name: "访问人数",
              type: "line",
              stack: "访问人数",
              data: []
            },
            {
              name: "下单人数",
              type: "line",
              stack: "下单人数",
              data: []
            },
            {
              name: "付款人数",
              type: "line",
              stack: "付款人数",
              data: []
            },
            {
              name: "付款订单数",
              type: "line",
              stack: "付款订单数",
              data: []
            },
            {
              name: "商品总销量",
              type: "line",
              stack: "商品总销量",
              data: []
            },
            {
              name: "分销总佣金",
              type: "line",
              stack: "分销总佣金",
              data: []
            },
            {
              name: "客单价",
              type: "line",
              stack: "客单价",
              data: []
            },
            {
              name: "访客下单转化率",
              type: "line",
              stack: "访客下单转化率",
              data: []
            },
            {
              name: "下单付款转化率",
              type: "line",
              stack: "下单付款转化率",
              data: []
            },
            {
              name: "访客付款转化率",
              type: "line",
              stack: "访客付款转化率",
              data: []
            }
          ];
          let totalTurnover = Object.values(res.data.data.totalTurnover);
          let orderCountSum = Object.values(res.data.data.orderCountSum);
          let lookGoodsUserNumber = Object.values(
            res.data.data.lookGoodsUserNumber
          );
          let orderUserNumber = Object.values(res.data.data.orderUserNumber);
          let orderPayUserNumber = Object.values(
            res.data.data.orderPayUserNumber
          );
          let payOrderCount = Object.values(res.data.data.payOrderCount);
          let goodsSalesSum = Object.values(res.data.data.goodsSalesSum);
          let dealerOrderCommission = Object.values(
            res.data.data.dealerOrderCommission
          );
          let userPriceRate = Object.values(res.data.data.userPriceRate);
          let orderPayRate = Object.values(res.data.data.orderPayRate);
          let userPayRate = Object.values(res.data.data.userPayRate);
          totalTurnover.forEach(res => {
            x.push(res.date);
            series[0].data.push(res.value);
          });
          orderCountSum.forEach(res => {
            series[1].data.push(res.value);
          });
          lookGoodsUserNumber.forEach(res => {
            series[2].data.push(res.value);
          });

          //下单人数
          orderUserNumber.forEach(res => {
            series[3].data.push(res.value);
          });
          orderPayUserNumber.forEach(res => {
            series[4].data.push(res.value);
          });
          payOrderCount.forEach(res => {
            series[5].data.push(res.value);
          });
          goodsSalesSum.forEach(res => {
            series[6].data.push(res.value);
          });
          dealerOrderCommission.forEach(res => {
            series[7].data.push(res.value);
          });
          userPriceRate.forEach(res => {
            series[8].data.push(res.value);
          });
          orderPayRate.forEach(res => {
            series[9].data.push(res.value);
          });
          userPayRate.forEach(res => {
            series[10].data.push(res.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart5"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis"
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: [
                '总交易额','订单总数','访问人数','下单人数','付款人数','付款订单数','商品总销量','分销总佣金','客单价','访客下单转化率','下单付款转化率','访客付款转化率'
              ],
            
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      });
    },
    //用户看板
    drawLine6(){
      this.loading10 = true
      userAnalysis({type:1}).then(res=>{
        if(res.data.code==1){
          this.loading10 = false
          this.data_update_time10 = res.data.data.data_update_time
             const x = [];
          const series = [
            {
              name: "总用户",
              type: "line",
              data: []
            },
            {
              name: "新增用户",
              type: "line",
              data: []
            },
            {
              name: "小程序渠道用户",
              type: "line",
              data: []
            },
            {
              name: "公众号渠道用户",
              type: "line",
              data: []
            },
            {
              name: "已下单用户",
              type: "line",
              data: []
            },
            {
              name: "未下单用户",
              type: "line",
              data: []
            },
            {
              name: "付款用户",
              type: "line",
              data: []
            },
            {
              name: "会员用户总数",
              type: "line",
              data: []
            },
            {
              name: "分销商总数",
              type: "line",
              data: []
            },
            {
              name: "分销商客户总数",
              type: "line",
              data: []
            },
            {
              name: "已绑定手机号用户",
              type: "line",
              data: []
            },
            {
              name: "已关注公众号用户",
              type: "line",
              data: []
            },
            {
              name: "流失用户",
              type: "line",
              data: []
            },
            {
              name: "潜在用户",
              type: "line",
              data: []
            },
            {
              name: "活跃用户",
              type: "line",
              data: []
            },
          ];
           let userNumberSum = Object.values(res.data.data.userNumberSum);
           let newUserNumberSum = Object.values(res.data.data.newUserNumberSum);
           let sAppUserNumber = Object.values(res.data.data.sAppUserNumber);
           let weChatUserNumber = Object.values(res.data.data.weChatUserNumber);
           let haveOrderUserNumber = Object.values(res.data.data.haveOrderUserNumber);
           let haveNotOrderUserNumber = Object.values(res.data.data.haveNotOrderUserNumber);
           let orderPayUserNumber = Object.values(res.data.data.orderPayUserNumber);
           let vipUserNumber = Object.values(res.data.data.vipUserNumber);
           let dealerNumberSum = Object.values(res.data.data.dealerNumberSum);
           let customerNumber = Object.values(res.data.data.customerNumber);
           let bindMobileUserNumber = Object.values(res.data.data.bindMobileUserNumber);
           let haveInWeChatUserNumber = Object.values(res.data.data.haveInWeChatUserNumber);
           let lossUserNumber = Object.values(res.data.data.lossUserNumber);
           let potentialUserNumber = Object.values(res.data.data.potentialUserNumber);
           let activeUserNumber = Object.values(res.data.data.activeUserNumber);
            userNumberSum.forEach(res => {
            x.push(res.date);
            series[0].data.push(res.value);
          });
          newUserNumberSum.forEach(res => {
            series[1].data.push(res.value);
          });
          sAppUserNumber.forEach(res => {
            series[2].data.push(res.value);
          });
          weChatUserNumber.forEach(res => {
            series[3].data.push(res.value);
          });
          haveOrderUserNumber.forEach(res => {
            series[4].data.push(res.value);
          });
           haveNotOrderUserNumber.forEach(res => {
            series[5].data.push(res.value);
          });
          orderPayUserNumber.forEach(res => {
            series[6].data.push(res.value);
          });
          vipUserNumber.forEach(res => {
            series[7].data.push(res.value);
          });
          dealerNumberSum.forEach(res => {
            series[8].data.push(res.value);
          });
          customerNumber.forEach(res => {
            series[9].data.push(res.value);
          });
          bindMobileUserNumber.forEach(res => {
            series[10].data.push(res.value);
          });
          haveInWeChatUserNumber.forEach(res => {
            series[11].data.push(res.value);
          });
          lossUserNumber.forEach(res => {
            series[12].data.push(res.value);
          });
          potentialUserNumber.forEach(res => {
            series[13].data.push(res.value);
          });
          activeUserNumber.forEach(res => {
            series[14].data.push(res.value);
          });
           const myEchart = this.$echarts.init(
            document.getElementById("echart6"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis"
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: ['总用户','新增用户','小程序渠道用户','公众号渠道用户','已下单用户','未下单用户','付款用户','会员用户总数','分销商总数',
              '分销商客户总数','已绑定手机号用户','已关注公众号用户','流失用户','潜在用户','活跃用户'],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      })
    },
    //用户活跃率
    drawLine7() {
      this.loading8 = true
        userActiveRate({ type: 1 }).then(res => {
          if (res.data.code == 1) {
            this.data_update_time11 = res.data.data.data_update_time
            this.loading8 = false;
            const x = [];
            const a = res.data.data.user_active_rate+'%'
           
            x.push(
                { value: res.data.data.no_viewed_count, name: "未访问用户数" },
                { value: res.data.data.user_viewed_count, name: "访问用户数" }
              );

            const myEchart = this.$echarts.init(
              document.getElementById("echart7"),
              "macarons"
            );
            myEchart.setOption({
              title: {
                text: a,
                x: "center", //文字位置
                y: "center" //文字位置
              },
              tooltip: {},
              series: [
                {
                  name: "pie",
                  type: "pie",
                  radius: ["50%", "70%"],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: "center"
                  },
                  emphasis: {
                    label: {
                      show: false,
                      fontSize: "16",
                      fontWeight: "bold"
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  
                  data: x
                }
              ]
            });
          }
        });
    },
    //新增用户
    drawLine8() {
      this.loading9 = true;
      newUserCount({ type: 1 }).then(res => {
        if (res.data.code == 1) {
          this.data_update_time12 = res.data.data.data_update_time
          this.loading9 = false;
          const x = [];
          const series = [
            {
              type: "line",
              data: []
            }
          ];
          let value1 = Object.values(res.data.data);
          // console.log("dggggggggggggggggg",value1.date)
          value1.forEach(item => {
            x.push(item.date);
            series[0].data.push(item.num);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart8"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis"
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              boundaryGap: false,
              data: x
            },
            yAxis: {
              type: "value"
            },
            series: series
          });
        }
      });
    },
    //自定义看板
    drawLine9(){
      this.loading7 = true
     
      selfData({type:1}).then(res=>{
        if(res.data.code==1){
          this.loading7 = false
          let rgbdata =['199,237,233','175,215,237','92,167,186','255,66,93','147,224,255','248,232,137','84,115,135','205,201,125','236,230,170'] 
          this.data_update_time13 = res.data.data.data_update_time
          let x= []
          let z = []
          let series = []
              let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
          res.data.data.forEach((item,index)=>{
           series.push({name:item.name,data:[],type:'line',stack:'总量', areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb('+rgbdata[index]+')'
                }, {
                    offset: 1,
                    color: '#ffffff'
                }])
            },itemStyle:{
              color: 'rgb('+rgbdata[index]+')'
            }})
             let items = Object.keys(item.data);
             let itemsdata = Object.values(item.data);
              x=items
             series[index].data = itemsdata
             series.forEach(o=>{
             z.push(o.name)
             })
          })
            const myEchart = this.$echarts.init(
            document.getElementById("echart9"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: z,
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false,
              name: '(日期)',// 横轴名称
              axisLabel: {
                            show: true,
                            fontSize: 12,
                             fontWeight: 'bold',
                            textStyle: {
                                color: '#1890FF'
                            }
                        },
                  axisLine:{
                  lineStyle:{
                      color:'#1890FF',
                      width:2,//这里是为了突出显示加上的
                  }
              } 
            },
            yAxis: {
              type: "value",
              name: '(对应数据值)',// 横轴名称
              axisLabel: {
                            show: true,
                            fontSize: 12,
                             fontWeight: 'bold',
                            textStyle: {
                                color: '#1890FF'
                            }
                        },
                         axisLine:{
                  lineStyle:{
                      color:'#1890FF',
                      width:2,//这里是为了突出显示加上的
                  }
              }
            },
            series: series
          });
        }
      })
    },
    //用户访问时间段
    drawLine20(){
      this.loading20 = true
      goodsLookTime({type:1}).then(res=>{
        if(res.data.code==1){
          this.loading20 = false
           this.data_update_time20 = res.data.data.data_update_time
           let x= []
          const series = [
            {
              name: "时间段访问人数",
              type: "line",
              data: []
            },
            {
              name: "时间段访问量",
              type: "line",
              data: []
            },
          ];
          if(res.data.data.data_update_time && res.data.data.look_number){
             let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            let look_user = Object.values(res.data.data.look_user)
            let look_number = Object.values(res.data.data.look_number)
            look_user.forEach(item=>{
              x.push(item.date)
              series[0].data.push(item.value)
            })
            look_number.forEach(item=>{
              series[1].data.push(item.value)
            })
          }
           
          const myEchart = this.$echarts.init(
            document.getElementById("echart20"),
            "macarons"
          );
          myEchart.setOption({
             title: {
                  // text: '暂无数据',
                  x: 'center',
                  y: 'center',
                  textStyle: {
                      color: '#fff',
                      fontWeight: 'normal',
                      fontSize: 16
                  }
              },

            tooltip: {
              trigger: "axis"
            },
            legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: ['时间段访问人数','时间段访问量'],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
          })
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
#echart1 {
  width: 770px;
  height: 480px;
}
#echart2 {
 width: 770px;
  height: 480px;
}
#echart3 {
 width: 770px;
  height: 300px;
}
#echart4 {
  width: 770px;
  height: 480px;
}
#echart5 {
  width: 95%;
  height: 500px;
}
#echart6 {
  width: 95%;
  height: 500px;
}
#echart7 {
  width: 730px;
  height: 300px;
}
#echart8 {
  width: 730px;
  height: 480px;
}
#echart20 {
  width: 770px;
  height: 480px;
}
#echart9 {
  width: 95%;
  height: 480px;
}
.top-box {
  padding: 20px 20px 10px 20px;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
  display: flex;
}
</style>
